<template>
  <van-nav-bar title="物流详情" left-text="" left-arrow @click-left="goBack" />
  <section class="aui-flexView">
      <!-- 订单详细 -->
      <section class="aui-scrollView">
          <!-- 订单状态 -->
          <div class="aui-pay-change">
              <div class="aui-flex">
                  <div class="aui-flex-box">
                      <h3>{{ detail.status_text }}</h3>
                  </div>
                  <div class="aui-pay-zfb">
                      <img src="/assets/images/icon-zfb.png" alt="" />
                  </div>
              </div>
          </div>

          <!-- 收货地址 -->
          <div class="aui-flex" v-if="detail.addrsss">
              <div class="aui-flex-add">
                  <img :src="LoginUser.avatar" alt="" />
              </div>
              <div class="aui-flex-box">
                  <h3>
                      {{ detail.addrsss.consignee }} <em> {{ detail.addrsss.mobile }}</em>
                  </h3>
                  <p>{{ detail.addrsss.region_text + detail.addrsss.address }}</p>
              </div>
          </div>

          <!-- 物流信息 -->
          <van-steps direction="vertical" :active="0">
              <van-step v-for="(item, index) in expresslist" :key="index">
                  <h3>{{ item.status }}</h3>
                  <p>{{ item.time }}</p>
              </van-step>
          </van-steps>

      </section>
  </section>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const goBack = () => { proxy.$router.push('/order/index') }
const LoginUser = reactive(proxy.$cookies.get("LoginUser"))
const orderid = ref(proxy.$route.query.orderid ?? 0)
const detail = ref({
    addrsss: {}
})
const expresslist = ref([
  {time: '2024-09-10 09:39:25', status: '已签收，签收人凭取货码签收。如有疑问请联系快递员: 15975874867，网点电话：020-81246107，投诉电话:020-88501187。感谢使用圆通速递，期待再次为您服务！'},
    {time: '2024-09-10 09:26:30',status:'您好，快件已暂存至广州荔湾洪石坊153号店菜鸟驿站，如有疑问请联系15113853578，投诉电话：020-88501187。感谢使用圆通速递，期待再次为您服务！'},
    {time: '2024-09-10 07:30:12', status:'【广东省广州市荔湾区龙溪】的龙明兴（15975874867）正在派件，（有事先呼我，勿找卖家，少一次…20-88501187。[95161和185211号段的上海号码为圆通快递员专属号码，请放心接听]'},
    {time: '2024-09-10 07:25:55', status: '您的快件已经到达【广东省广州市荔湾区龙溪】'},
    {time: '2024-09-10 06:40:55', status: '您的快件离开【广州转运中心】，已发往【广东省广州市荔湾区龙溪】'},
    {time: '2024-09-10 00:11:07', status: '您的快件已经到达【广州转运中心】'},
    {time: '2024-09-09 01:26:04', status: '您的快件离开【临沂转运中心】，已发往【广州转运中心】'},
    {time: '2024-09-09 01:24:18', status: '您的快件已经到达【临沂转运中心】'},
    {time: '2024-09-08 19:38:51', status: '您的快件离开【山东省枣庄市滕州市】，已发往【临沂转运中心】'},
    {time: '2024-09-08 18:51:50', status: '您的快件在【山东省枣庄市滕州市】已揽收，揽收人: 刘夫才（18765823292）'}
])

onBeforeMount(() => {
  getOrderInfoData()
})
const getOrderInfoData = async () => {
  // 订单详情
  let result = await Api.OrderInfo({ busid:LoginUser.id,orderid:orderid.value })
  if (result.code == 1) {
    detail.value = result.data;
  }
  // 物流详情
  // let res = await Api.OrderExpress({ busid:LoginUser.id,orderid:orderid.value })
  // if (res.code == 1) {
  //   expresslist.value = res.data;
  //   console.log(expresslist.value);
  // }
}
</script>

<style>
@import url('/assets/css/info.css');
</style>